<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .todo-container {
            width: 400px;
            margin: 50px auto;
        }

        .input-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        input[type="text"] {
            padding: 10px;
        }

        button {
            width: 100px;
            padding: 10px;
            cursor: pointer;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        li {
            background: #f4f4f4;
            margin-bottom: 5px;
            padding: 10px;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    <div class="todo-container">
        <h2>待办事项管理</h2>
        <div class="input-container">
            <input type="text" id="newTask" placeholder="添加新的待办事项">
            <button onclick="addTask()">add</button>
            <button onclick="clearAllTasks()">delete All</button>
        </div>
        <input type="text" id="searchTask" placeholder="搜索待办事项" oninput="searchTasks()">
        <ul id="taskList"></ul>
    </div>

    <script>
        // 添加待办事项
        function addTask() {
            var newTaskInput = document.getElementById('newTask');
            if (newTaskInput.value.trim() === '') return;

            fetch('http://localhost:3000/task/tasks', { // 确保URL与后端路由匹配
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    text: newTaskInput.value,
                    userId: 1 // 假设用户ID为1
                })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.taskId) {
                        newTaskInput.value = ''; // 清空输入框
                        displayTasks();
                    } else {
                        alert('添加失败');
                    }
                })
                .catch(error => {
                    console.error('添加请求失败:', error);
                    alert('添加请求失败，请稍后重试。');
                });
        }

        // 删除所有待办事项
        function clearAllTasks() {
            fetch('http://localhost:3000/task/tasks', { // 确保URL与后端路由匹配
                method: 'DELETE'
            })
                .then(response => response.json())
                .then(data => {
                    if (data.changes) {
                        tasks = [];
                        displayTasks();
                    } else {
                        alert('删除失败');
                    }
                })
                .catch(error => {
                    console.error('删除请求失败:', error);
                    alert('删除请求失败，请稍后重试。');
                });
        }

        // 获取待办事项
        function fetchTasks() {
            fetch('http://localhost:3000/task/tasks?userId=1', { // 确保URL与后端路由匹配
                method: 'GET'
            })
                .then(response => response.json())
                .then(data => {
                    tasks = data;
                    displayTasks();
                })
                .catch(error => {
                    console.error('获取请求失败:', error);
                    alert('获取请求失败，请稍后重试。');
                });
        }

        // 初始化页面
        fetchTasks();
    </script>
</body>

</html>